import React, { Component } from 'react'
import { Form, Input, Button, Checkbox } from 'antd'
import style from './Login.module.less'

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
}
const tailLayout = {
  wrapperCol: { offset: 6, span: 18 },
}

export default class Login extends Component {
  constructor(props) {
    super(props)
    this.state={
      amountRules: [{ required: true, message: 'Please input your username!' }],
      pwdRules: [{ required: true, message: 'Please input your password!' }]
    }
  }

  onFinish = values => {
    console.log('Success:', values, this);
    this.props.history.push('/')
  }

  onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  }
  render() {  
    return (
      <div height="100%" className={style.wrap}>
        <Form
          {...layout}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
          className={style['login-form']}
        >
          <Form.Item
            label="Username"
            name="username"
            rules={this.state.amountRules}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            rules={this.state.pwdRules}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item {...tailLayout} name="remember" valuePropName="checked">
            <div className={style.remember}>
              <Checkbox>Remember me</Checkbox>
            </div>
            
          </Form.Item>

          <Form.Item  {...tailLayout}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
